<template>
  <div
    class="preview-wrapper"
    :style="{ width: width ? `${width}px` : '100%' }"
  >
    <div class="files" v-if="fileType === 'file'">
      <div class="files-item" v-for="(item, index) of list" :key="index">
        <span :title="item.fileName">{{ item.fileName }}</span>
        <div
          class="files-item-download"
          v-if="showDownload"
          @click="handleDownload(item)"
        >
          <el-icon><Download /></el-icon>
        </div>
      </div>
    </div>
    <div class="pictures" v-if="fileType === 'picture'">
      <div class="pictures-item" v-for="(item, index) of list" :key="index">
        <el-image
          fit="cover"
          :preview-src-list="prewiewList"
          preview-teleported
          :src="item.fileUrl"
          :initial-index="index"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
        />
        <div
          class="pictures-item-download"
          v-if="showDownload"
          @click="handleDownload(item)"
        >
          <el-icon><Download /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { Download } from '@element-plus/icons-vue'
import { computed } from 'vue'
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  fileType: {
    type: String,
    default: 'file',
  },
  width: {
    type: [Number, String],
  },
  showDownload: {
    type: Boolean,
    default: true,
  },
})
const prewiewList = computed(() => {
  if (props.list && props.list.length > 0) {
    return props.list.map((i) => {
      return i.fileUrl
    })
  } else {
    return []
  }
})
const handleDownload = (item) => {
  const a = document.createElement('a')
  a.style.display = 'none'
  a.href = item.fileUrl
  a.target = '_blank'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}
</script>
<style lang="scss" scoped>
.preview-wrapper {
  width: 100%;
  .files {
    width: 100%;
    &-item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-items: flex-start;
      margin-bottom: 10px;
      span {
        width: calc(100% - 30px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &-download {
        width: 30px;
        display: flex;
        align-content: center;
        justify-content: center;
        cursor: pointer;
        .el-icon {
          color: var(--el-color-primary);
        }
      }
    }
  }
  .pictures {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, 120px);
    grid-gap: 10px;
    &-item {
      width: 120px;
      height: 120px;
      position: relative;
      .el-image {
        width: 100%;
        height: 100%;
      }
      &-download {
        position: absolute;
        padding: 2px;
        background: var(--el-color-primary);
        border-radius: 50%;
        display: flex;
        align-content: center;
        justify-content: center;
        right: 5px;
        bottom: 5px;
        cursor: pointer;
        .el-icon {
          color: #fff;
        }
      }
    }
  }
}
</style>
